<template>

    挂号界面

    <div>
        <el-row>

            <el-col :span="12">
                <el-button type="primary" @click="toRegist">挂号</el-button>
            </el-col>

        </el-row>

        <el-table :data="tableData" border style="width: 100%" v-loading="loading">
            <el-table-column type="index" label="序号" width="200" align="center" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="gender" label="性别">
                <template #default="scope">
                    {{ translateCode2Name('Gender', scope.row.gender) }}

                    <!--                 <div>##{{ scope.row.gender }}##</div>
                    <div>--{{ translateCode2Name('Gender', scope.row.gender) }}--</div>       -->
                </template>

            </el-table-column>

            <el-table-column prop="visitTime" label="看诊时间 " />

        </el-table>
        <el-pagination v-model:current-page="queryParam.current" :page-sizes="[3, 5, 10, 15, 20, 30, 40]"
            v-model:page-size="queryParam.size" size="default" layout="sizes, prev, pager, next" :total="total"
            @size-change="loadDataList" @current-change="loadDataList" />






        <el-dialog title="挂号" width="800px" v-model="showRegist">

            <RegisterForm v-if="showRegist" :close="closeDialog"></RegisterForm>
        </el-dialog>

    </div>





</template>


<script lang="ts" setup name="Regist">
import { ref, reactive, onMounted } from 'vue';
import { translateCode2Name } from "@/utils/constantsUtils";

import RegisterForm from './guahao-form.vue'

import { page } from '@/utils/crud'
const showRegist = ref(false);


interface Register {
    registId: number;
    name: string;
    gender: string;
    age: string;
    birthday: string;
    visitTime: string;
    deptId: string;
    registLevel: string;
    userid: string;
    book: string;
    fee: number;
}


const tableData = ref<Register[]>()
const queryParam = reactive({
    current: 1,
    size: 10,
});
const total = ref(0);
const loading = ref(false);



// translateCode2Name("Gender", "1");

/**
 * 去挂号
 */
function toRegist() {
    showRegist.value = true
}


function closeDialog() {
    showRegist.value = false;
    loadDataList();
}


/**
 * 查询已挂号的信息
 */
function loadDataList() {
    loading.value = true;
    // 为给定 ID 的 user 创建请求
    //data  真实的数据
    page<Register>('guahao/page', queryParam).then(function (page) {
        tableData.value = page.data;
        total.value = page.total;
        loading.value = false;
    })

}

onMounted(() => {
    loadDataList();
})
</script>